import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    Image,
    StatusBar,
    StyleSheet
} from 'react-native';

import {
    Actions
} from 'react-native-router-flux';

import {
    Tip,
    Input,
    Button,
    Press,
    Layout,
    Loading
} from './../../components';

import {
    onEvent,
    events
} from './../../utils/analytics';


import * as Const from './../../const';
import connect from './../../utils/connect';
import * as saveLog from './../../utils/saveLog';
import userAction from './../../state/actions/user';
import * as userTypes from './../../state/types/user';

import app_icon from './../../images/logo.png';
import close_icon from './../../images/close.png';
import SafeAreaView from 'react-native-safe-area-view';

interface State {
    username:string,
    password?: string
}

interface Props {
    userActions?: any
}

@connect({
    userActions: userAction
})
class Login extends PureComponent <Props, State> {

    state = {
        username:``,
        password: ``
    }

    async componentDidMount() {
        const {
            username = ``,
            password = ``
        } = await saveLog.get();
        this.setState({
            username,
            password
        })
    }

    private _onPasswordChange = (val: string) => {
        this.setState({
            password: val
        })
    }

    private saveAccount = async (data:any) => {
        saveLog.set(data);
    }

    private _onUserNameChange = (val: string) => {
        this.setState({
            username: val
        })
    }

    get disabled() {
        const {
            username = ``,
            password = ``
        } = this.state;
        return !username || !password;
    }

    private _onSubmit = async () => {
        const {
            username,
            password
        } = this.state;

        if(this.disabled) {
            return false
        }

        const {
            userActions
        } = this.props;


        const _params = {
            username: username,
            password: password,
        }

        Loading.show();

        try {
            await userActions[
                userTypes.userLogin
            ](_params);

            this.saveAccount(_params);

            onEvent(events[`用户登录`],{
                source:`UserName`
            })

            setTimeout(() => (
                Actions.reset(`/home`)
            ),300)
        }
        catch (e) {
           Tip.warm({
               message:e.message
           })
        }

        Loading.close();
    }

    private toForgot = async () => {
        Actions.push(`/user/forgot`)
    }

    private toRegister = () => {
        Actions.push(`/user/register`)
    }

    render() {
        const {
            username,
            password
        } = this.state;
        return (
            <Layout fixed={true} header={false}>
                <StatusBar barStyle="dark-content"/>
                <SafeAreaView forceInset={{top:'always'}}>
                    <View style={styles.header}>
                        <Press
                            source={close_icon}
                            onPress={Actions.pop}
                        />
                    </View>
                </SafeAreaView>
                <Image
                    source={app_icon}
                    style={styles.logoStyle}
                />
                <View style={styles.form}>
                    <Text style={styles.title}>
                        Sign in
                    </Text>
                    <Input
                        type="email"
                        value={username}
                        autoFocus={true}
                        placeholder="Account"
                        onChange={this._onUserNameChange}
                    />
                    <Input
                        type="password"
                        value={password}
                        placeholder="Password"
                        onChange={this._onPasswordChange}
                    />
                    <Text
                        style={styles.forgot}
                        onPress={this.toForgot}
                        children="Forgot your password?"
                    />
                    <View style={styles.footer}>
                        <Button
                            title="Continue"
                            onPress={this._onSubmit}
                            disabled={this.disabled}
                        />
                    </View>
                </View>
                <Press
                    onPress={this.toRegister}
                    style={styles.buttonStyle}
                >
                    <Text style={styles.buttonText}>
                        Create a account
                    </Text>
                </Press>
            </Layout>
        )
    }
}

export default Login;

const shadowStyle = {
    shadowColor: '#000',
    shadowOpacity: .1,
    shadowRadius: 12
}

const styles = StyleSheet.create({
    header:{
        paddingTop:6
    },
    form: {
        paddingTop:24,
        borderRadius:4,
        paddingBottom:36,
        ...shadowStyle,
        paddingHorizontal:28,
        backgroundColor:`#fff`
    },
    iconStyle:{
        marginRight:8
    },
    forgot: {
        fontSize: 14,
        marginTop:16,
        color: `#666666`,
        textAlign:`center`
    },
    footer:{
        paddingTop:36
    },
    logoStyle:{
        marginBottom:26,
        alignSelf:`center`
    },
    title:{
        fontSize:24,
        color:`#000`,
        marginBottom:12,
        fontWeight:`bold`
    },
    buttonStyle:{
        height:50,
        marginTop:16,
        borderRadius:4,
        ...shadowStyle,
        alignItems:`center`,
        justifyContent:`center`,
        backgroundColor:`#fff`
    },
    buttonText:{
        fontSize:16,
        color:Const.color,
        fontFamily:Const.fontFamily
    }
}) as any;